<script lang="ts" setup>
import { ref, reactive, watch } from "vue"
import {
  type FormInstance,
  type FormRules,
  type UploadUserFile,
  ElMessage,
  type UploadProps,
  type UploadInstance,
  type TabsPaneContext
} from "element-plus"
import { formatDateTime } from "@/utils"
import {
  getComplaintApi,
  updateComplaintApi,
  ComplaintUpload,
  addMessageApi,
  queryMessageApi,
  workOrderApi,
  workOrderQueryApi,
  SHbuttonApi,
  downLoadOrderTable,
  getWorkRZ,
  workOrderUpdateApi,
  rechargeRecord
} from "@/api/complaint"
import { usePagination } from "@/hooks/usePagination"
import { useUserStore } from "@/store/modules/user"
import { Search, Refresh, Download } from "@element-plus/icons-vue"
import { getComboDataApi10 } from "@/api/combo"
import { useTeamStore } from "@/store/modules/team"
import { shortcuts } from "@/utils/dateSet"

defineOptions({
  name: "Dispose"
})
const ruleFormRef = ref<FormInstance>()
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const userStore = useUserStore()
const dialogVisible = ref(false)
const activeName = ref("one") // 一会换成one
const tableData = ref()
//  #region 查找未处理纠纷订单
const getComplaint = () => {
  if (!searchData.time) {
    searchData.time = []
  }
  getComplaintApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName,
    department: userStore.department,
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    type: searchData.type || "", // 纠纷单类型
    packageId: searchData.packageId || "", // 套餐
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    orderID: searchData.orderID || "", // 订单id
    release: searchData.reply || "", // 回复情况
    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: searchData.state
  }).then((res: any) => {
    tableData.value = res.data.list
    paginationData.total = res.data.total
    // console.log(res.data.total, "获取未处理的数据")
  })
}
// #endregion

//  #region 查看所有工单
const tableData4 = ref<any>([])
const tableTotal3 = ref()
const getComplaint3 = async () => {
  await workOrderQueryApi({
    start: new Date(searchData.time[0]).getTime() || "",
    end: new Date(searchData.time[1]).getTime() || "",
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    state: searchData.stateTwo,
    team: userStore.teamName,
    GSteam: searchData.GSteam || "", // 归属团队
    department: userStore.department,
    orderId: searchData.id || ""
  }).then((res: any) => {
    tableData4.value = res.data.list
    tableTotal3.value = res.data.total
    console.log(res, "获取驳回所有工单")
  })
}
// #endregion

// #region 搜索功能
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive<any>({
  id: "", // 纠纷单号
  contact: "", // 联系人
  mobile: "", // 联系电话
  type: "", // 纠纷单类型
  reason: "", // 纠纷原因
  team: "", // 归属团队
  superName: "", // 上级渠道
  orderID: "", // 订单id
  time: "", // 时间
  packageId: "", // 套餐
  reply: "", // 回复情况
  freeTime: "", // 减免工单时间
  isState: "", // 首回情况
  GSteam: "",
  state: ["0"],
  stateTwo: "5"
})
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    if (activeName.value == "one") {
      getComplaint()
    } else if (activeName.value == "two") {
      getComplaint()
    } else if (activeName.value == "stree") {
      getComplaint()
    } else if (activeName.value == "four") {
      getComplaint3()
    } else if (activeName.value == "five") {
      getComplaint3()
    } else if (activeName.value == "six") {
      getComplaint3()
    }
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    if (activeName.value == "one") {
      getComplaint()
    } else if (activeName.value == "two") {
      getComplaint()
    } else if (activeName.value == "stree") {
      getComplaint()
    } else if (activeName.value == "four") {
      getComplaint3()
    } else if (activeName.value == "five") {
      getComplaint3()
    } else if (activeName.value == "six") {
      getComplaint3()
    }
  }
  paginationData.currentPage = 1
}
// #endregion

//  #region 查看详情数据
const ruleFormXQ = reactive<any>({ data: {} })
const messages = ref() // 对话框
const kimage = ref() // 投诉图片
const Kstate = ref() // 状态
const handleClick = async (res: any) => {
  console.log("拿到当前行数据", res)
  ruleFormXQ.data = res
  ruleFormXQ.data.KID = res.id // 纠纷单号
  ruleFormXQ.data.Ktime = formatDateTime(res.time) // 纠纷时间
  ruleFormXQ.data.Ktype = res.type
  ruleFormXQ.data.Kreason = res.reason
  ruleFormXQ.data.Kcause = res.cause
  ruleFormXQ.data.KorderOutId = res.orderOutId
  ruleFormXQ.data.Kuser = res.user
  ruleFormXQ.data.Kcontact = res.contact
  ruleFormXQ.data.Kmobile = res.mobile
  if (res.image == "") {
    ruleFormXQ.data.Kimage = "111"
  } else {
    ruleFormXQ.data.Kimage =
      res.image.charAt(res.image.length - 1) === "," ? res.image.split(",").slice(0, -1) : res.image.split(",")
  }
  console.log("图片", ruleFormXQ.data.Kimage)
  kimage.value = res.image
  Kstate.value = res.state
  dialogVisible.value = true
  queryMessageApi({
    complaintId: res.id
  }).then((ress: any) => {
    messages.value = ress.data
    // str = str.slice(0, -1)
  })
  updateComplaintApi({
    id: res.id,
    isRush: ""
  }).then((res: any) => {
    getComplaint()
    console.log(res, "清空")
  })
  // console.log("图片", ruleFormXQ.data.kimage)
  // console.log("状态", Kstate.value)
}
// #endregion

// #region 修改状态
const handleAdd = (row: any) => {
  updateComplaintApi({
    id: row.id,
    state: "1"
  }).then(() => {
    ElMessage.success("提交成功")
    getComplaint()
  })
  console.log(row.state, "修改后的状态")
}
// #endregion

// #region 上传图片
const fileList = ref<UploadUserFile[]>([])
const dialogVisible2 = ref(false)
const dialogImageUrl = ref("")

const handleChageImg = (file: any, resfileList: any) => {
  const size = ref(10)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList.value = []
  } else {
    fileList.value = resfileList
  }
}
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible2.value = true
}
// #endregion

// #region 提交表单
const ruleForm = reactive({
  desc: "",
  video: "",
  image: ""
})
const rules = reactive<FormRules>({
  desc: [{ required: true, trigger: "blur", message: "请输入反馈信息" }]
})
const submitForm = (formEl: any) => {
  console.log(formEl, "12123")
  if (!formEl) return
  formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      await uploadFuc1()
      await addMessageApi({
        source: ruleFormXQ.data.KID,
        body: ruleForm.desc,
        image: ruleForm.image,
        video: ruleForm.video,
        user: userStore.username,
        handle: "处理已回复",
        release: "发布未回复"
      }).then(() => {
        ruleForm.desc = ""
        ElMessage.success("上传成功")
        getComplaint()
      })
      dialogVisible.value = false
    } else {
      console.log("error submit!", fields)
    }
  })
}

const uploadFuc1 = async () => {
  const fileData1 = new FormData()
  fileList.value.forEach((file: any) => {
    fileData1.append("file", file.raw)
  })
  if (fileList.value.length !== 0) {
    await ComplaintUpload(fileData1).then((res: any) => {
      if (res.code == 200) {
        ruleForm.image = res.data
          .map((item: any) => {
            return item.split("/image/")[1]
          })
          .join()
        console.log(ruleForm.image, "拿到的图片")
        fileList.value = []
      }
    })
  }
}
const clearValidate = () => {
  ruleFormRef.value?.clearValidate()
}
const resetForm = () => {
  fileList.value = []
  ruleForm.video = ""
  formWorkOrder.data.shenReason = ""
  ruleFormRef.value?.resetFields()
  uploadRef.value?.clearFiles()
  clearValidate()
}

// #endregion

// #region 系统对应套餐
const comboList = ref<any>([])
const comboAll = (val: any) => {
  if (val) {
    getComboDataApi10({
      state: "",
      team: "",
      name: val
    }).then((res: any) => {
      comboList.value = res.data
    })
  } else {
    comboList.value = []
  }
}
// #endregion

// 时间
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]

// #region 生成工单赋值数据
const KIDGD = ref()
const formWorkOrder = reactive<any>({ data: {} })
const dialogVisibleA = ref(false)
const dialogVisibleC = ref(false) // 添加提示框
const GSstate = ref()
const PDbutton = ref(1) // 判断点开的是查看详情还是修改 0是查看 1是修改
const addWorkOrder = (row: any) => {
  resetFormA()
  dialogVisibleA.value = true
  GSstate.value = row.state
  console.log(row)

  // 判断状态
  if (row.state == 5) {
    formWorkOrder.data = row
    formWorkOrder.data.kimage = "111" // 图片多张
    formWorkOrder.data.state = 1

    PDbutton.value = 1
  } else if (row.state == 6) {
    formWorkOrder.data = row
    if (row.kimage == "") {
      formWorkOrder.data.kimage = ""
    } else {
      formWorkOrder.data.kimage =
        row.kimage.charAt(row.kimage.length - 1) === "," ? row.kimage.split(",").slice(0, -1) : row.kimage.split(",")
    }

    PDbutton.value = 0
  } else if (row.state == 7) {
    formWorkOrder.data = row
    console.log(row.kimage, 666666666)
    if (row.kimage == "") {
      formWorkOrder.data.kimage = ""
    } else {
      formWorkOrder.data.kimage =
        row.kimage.charAt(row.kimage.length - 1) === "," ? row.kimage.split(",").slice(0, -1) : row.kimage.split(",")
    }
    PDbutton.value = 0
  } else {
    PDbutton.value = 3
    KIDGD.value = row.id // 纠纷id
    formWorkOrder.data.shopName = row.team // 店铺名
    formWorkOrder.data.id = row.id // 店铺名
    formWorkOrder.data.orderId = row.orderOutId // 订单外部id
    formWorkOrder.data.packageId = row.packageId // 套餐名
    formWorkOrder.data.type = row.type // 投诉类型
    formWorkOrder.data.time = row.time // 投诉时间
    // formWorkOrder.data.contact = row.contact // 联系人
    formWorkOrder.data.kpromise = "" // 违规承诺
    formWorkOrder.data.publicity = "" // 虚假宣传
    formWorkOrder.data.ambiguity = "" // 有歧义
    formWorkOrder.data.preSales = "" // 售前接待
    formWorkOrder.data.afterSale = "" // 售后接待
    formWorkOrder.data.satisfaction = "" // 满意
    formWorkOrder.data.cause = row.cause // 投诉内容
    formWorkOrder.data.reason = row.reason // 投诉原因
    formWorkOrder.data.result = "" // 处理结果
    formWorkOrder.data.examine = "" // 自我检查
    formWorkOrder.data.evade = "" // 后期规避
    formWorkOrder.data.duty = "" // 责任人
    formWorkOrder.data.reception = "" // 接待人
    formWorkOrder.data.dispose = "" // 处理人
    formWorkOrder.data.shopManager = "" // 店长
    formWorkOrder.data.operation = "" // 运营
    formWorkOrder.data.manager = "" // 部门经理
    formWorkOrder.data.company = "" // 公司售后
    formWorkOrder.data.shopManagerTest = "" // 店长意见
    formWorkOrder.data.operationTest = "" // 运营意见
    formWorkOrder.data.managerTest = "" // 部门意见
    formWorkOrder.data.companyTest = "" // 公司售后意见
    formWorkOrder.data.state = 1 // 状态创好是0，店长审批是1，运营是2，
    //部门经理是3，公司审批是4，驳回是5，审批成功6，不减免是7 每次审批都只修改状态和意见，驳回的话之前的意见清空
    formWorkOrder.data.kimage = "" // 图片多张

    formWorkOrder.data.team = row.team // 工单的团队
    formWorkOrder.data.department = userStore.department // 自己的部门
    // formWorkOrder.data.complaint_state = row.state // 投诉订单是否超时完成
    formWorkOrder.data.complaintState = row.state // 投诉订单是否超时完成
  }
}
// 验证规则
const FormRulesYZ = reactive<FormRules>({
  kpromise: [{ required: true, trigger: "blur", message: "是否违规承诺" }],
  publicity: [{ required: true, trigger: "blur", message: "是否虚假宣传" }],
  ambiguity: [{ required: true, trigger: "blur", message: "是否有歧义" }],
  preSales: [{ required: true, trigger: "blur", message: "有无售前接待" }],
  afterSale: [{ required: true, trigger: "blur", message: "有无售后接待" }],
  satisfaction: [{ required: true, trigger: "blur", message: "是否满意" }],
  result: [{ required: true, trigger: "change", message: "请输入处理结果" }],
  examine: [{ required: true, trigger: "change", message: "请输入自我检查" }],
  evade: [{ required: true, trigger: "change", message: "请输入后期规避" }],
  duty: [{ required: true, trigger: "change", message: "请输入责任人" }],
  reception: [{ required: true, trigger: "change", message: "请输入接待人" }],
  dispose: [{ required: true, trigger: "change", message: "请输入处理人" }]
})
// #endregion

// #region 上传图片1
const fileList1 = ref<UploadUserFile[]>([]) // 图片数组
const dialogVisibleB = ref(false)
const dialogImageUrlB = ref("")
const handleChageImg1 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList1.value = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
  } else {
    // fileList1.value = resfileList
    console.log(fileList1.value, 192)
    formWorkOrder.data.kimage = resfileList
      .map((item: any) => {
        return item.response?.data.split("/image/")[1]
          ? item.response?.data.split("/image/")[1]
          : item.url.split("/image/")[1]
      })
      .join(",")
  }
}
//  移除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFiles, 180)
  // fileList1.value = uploadFiles
  formWorkOrder.data.kimage = uploadFiles
    .map((item: any) => {
      return item.response?.data.split("/image/")[1]
        ? item.response?.data.split("/image/")[1]
        : item.url.split("/image/")[1]
    })
    .join(",")
}
const handlePictureCardPreviewA: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrlB.value = uploadFile.url!
  dialogVisibleB.value = true
}
// #endregion

const uploadFuc2 = async () => {
  // 上传图片(多张和单张)
  const fileData = new FormData()
  if (fileList1.value.length != 0) {
    fileList1.value.forEach((file: any) => {
      if (file.status === "success") return
      fileData.append("file", file.raw)
      console.log("file", file)
    })
  }
  if (fileData == null) {
    await ComplaintUpload(fileData).then((res: any) => {
      if (res.code == 200) {
        ruleForm.image = res.data
          .map((item: any) => {
            return item.split("/image/")[1]
          })
          .join()
        console.log(ruleForm.image, "拿到的图片")
        fileList.value = []
      }
    })
  }
  await workOrderApi(formWorkOrder.data).then(async (res: any) => {
    console.log(res, 1923)
    if (res.code == 200) {
      dialogVisibleC.value = true
      await SHbuttonApi({
        id: KIDGD.value,
        state: GSstate.value,
        isTwo: true
      }).then((res: any) => {
        console.log(res)
      })
      console.log("请求通过", 8888888)
      // dataArr.value = []
    } else {
      ElMessage.success(res.message)
    }
  })
}

// #region 提交按钮
const onSubmit = (formEl: any) => {
  if (!formEl) return
  formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      await uploadFuc2()
      fileList1.value = []
    } else {
      console.log("error submit!", fields)
    }
  })
}
const clearValidateA = () => {
  ruleFormRef.value?.resetFields()
}
const resetFormA = () => {
  if (PDbutton.value == 1) {
    formWorkOrder.data.state = 5
  } else {
    fileList.value = []
    ruleFormRef.value?.resetFields()
    clearValidateA()
  }
}
const dialogVisiblebutton = () => {
  dialogVisibleA.value = false
  dialogVisibleC.value = false
  ElMessage.success("提交成功")
  getComplaint()
}
// #endregion

// #region 工单修改提交
const XGSubmit = (formEl: any) => {
  if (!formEl) return
  formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      workOrderUpdateApi(formWorkOrder.data).then((res: any) => {
        console.log(res, 66666666)
        dialogVisibleA.value = false
        ElMessage.success("提交成功")
        getComplaint3()
      })
    } else {
      console.log("error submit!", fields)
    }
  })
}
// #endregion

// #region 工单申诉
const dialogVisibleShensu = ref<boolean>(false)
const dialogVisibleshenReason = ref<boolean>(false)
const shenSubmit = (row: any) => {
  formWorkOrder.data = row
  dialogVisibleShensu.value = true
}
const confirmEvent = () => {
  dialogVisibleshenReason.value = true
  console.log("确定!")
}
const shenReasonadd = (formEl: any) => {
  if (!formEl) return
  formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      formWorkOrder.data.state = 8 // 申诉状态 王总审批
      formWorkOrder.data.shenstate = "已申诉"
      workOrderUpdateApi(formWorkOrder.data).then(() => {
        ElMessage.success("提交成功")
        dialogVisibleshenReason.value = false
        formWorkOrder.data.shenReason = ""
        getComplaint3()
      })
    } else {
      console.log("error submit!", fields)
    }
  })
}
// #endregion

// #region 查找团队 团队持久
const TeamListArr = ref()
const teamStore = useTeamStore()
teamStore.getTeamFn()
watch(
  [() => teamStore.teamListStore],
  (newValue) => {
    TeamListArr.value = newValue.flat()
  },
  {
    immediate: true
  }
)
// #endregion

// #region  tab切换
/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getComplaint, { immediate: true })
watch([() => paginationData.currentPage, () => paginationData.pageSize], getComplaint3, { immediate: true })
const ChangeClick = (tab: TabsPaneContext) => {
  paginationData.currentPage = 1
  if (paginationData.currentPage === 1) {
    if (tab.props.name == "one") {
      searchData.state = ["0"]
      activeName.value = "one"
      getComplaint()
    }
    if (tab.props.name == "two") {
      searchData.state = ["1"]
      activeName.value = "two"
      getComplaint()
    }
    if (tab.props.name == "stree") {
      PDbutton.value = 3
      searchData.state = ["2", "3"] // 已完成状态
      activeName.value = "stree"
      getComplaint()
    }
    if (tab.props.name == "four") {
      PDbutton.value = 1
      searchData.stateTwo = "5"
      activeName.value = "four"
      getComplaint3()
    }
    if (tab.props.name == "five") {
      PDbutton.value = 0
      stateFlag.value = "6"
      searchData.stateTwo = "6"
      activeName.value = "five"
      getComplaint3()
    }
    if (tab.props.name == "six") {
      PDbutton.value = 0
      stateFlag.value = "7"
      searchData.stateTwo = "7"
      activeName.value = "six"
      getComplaint3()
    }
  }
}
// #endregion

// 下载
const loading = ref(false)
const stateFlag = ref("0")
const handleDownLoad = () => {
  loading.value = true
  // 下载接口
  downLoadOrderTable({
    start: new Date(searchData.time[0]).getTime() || "",
    end: new Date(searchData.time[1]).getTime() || "",
    freestart: new Date(searchData.freeTime[0]).getTime() || "",
    freeend: new Date(searchData.freeTime[1]).getTime() || "",
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    state: stateFlag.value,
    team: userStore.teamName,
    GSteam: searchData.GSteam || "", // 归属团队
    department: userStore.department,
    orderId: searchData.id || ""
  }).then((res: any) => {
    loading.value = false
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "工单.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
  })
}
// 查看工单日志
const dialogVisibleWork = ref<boolean>(false)
const tableWork = ref<any>([])
const handleWorkOrder = (row: any) => {
  dialogVisibleWork.value = true
  getWorkRZ({
    page: 1,
    size: 100000,
    complaint_id: row.id
  }).then((res: any) => {
    console.log(res, "工单日志")
    tableWork.value = res.data
  })
}
import { getToken } from "@/utils/cache/cookies"
const headersOpts = {
  token: getToken()
}
//  #region  上传mp3、和mp4
const uploadRef = ref<UploadInstance>()
const isUploading = ref<boolean>(false) // 上传时禁止上传
// 上传中禁止上传
const UploadProgress = () => {
  isUploading.value = true
}
// 上传成功
const UploadSuccess = (response: any) => {
  // dialogVisible.value = false
  isUploading.value = false
  if (response.code == 200) {
    ElMessage.success("上传成功")
    ruleForm.video = response.data
    // console.log(ruleForm.video, "4")
    // console.log(file, "1")
    // console.log(fileList, "2")
    // console.log(response, "3")
  }
  // uploadRef.value!.clearFiles()
  // getComplaint1()
  // dialogVisible1.value = false
  console.log(response, "1")
  // console.log(file, "2")
  // console.log(fileList, "3")
}
// 上传失败
const UploadError = (response: any, file: any, fileList: any) => {
  isUploading.value = false
  ElMessage.error("上传失败")
  uploadRef.value?.clearFiles()
  console.log(response, "2")
  console.log(file, "2")
  console.log(fileList, "2")
}
// #endregion

// #region 播放amr音频文件
import BenzAMRRecoder from "benz-amr-recorder"
const amrtime = ref(0)
const playAmrData = (row: any) => {
  console.log(row)
  const url = row
  console.log(url)
  const amr = new BenzAMRRecoder()
  amr
    .initWithUrl(url)
    .then(() => {
      // console.log(Math.ceil(amr.getDuration()), "11")
      amrtime.value = Math.ceil(amr.getDuration())
      amr.play()
    })
    .catch(() => {
      ElMessage.error("文件损坏,播放失败")
    })
}
// #endregion

// 导出成PDF
// 打印
import { htmlPdf } from "@/utils/htmlToPdf"
const handleExport = (name: any) => {
  const fileName = "工单打印"
  const fileList = document.getElementsByClassName("pdfRef") // 根据id来打印
  htmlPdf(fileName, document.querySelector("#pdfRef"), fileList, false)
  if (name.isTrusted == true) {
    ElMessage.success("导出成功")
    // dialogVisibleA.value = false
  }
  // window.print()
}
const loadingXz = ref(false)
const downLoad = async () => {
  loadingXz.value = true
  await rechargeRecord({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    team: userStore.teamName || "",
    department: userStore.department,
    id: searchData.id || "", // 纠纷单号
    contact: searchData.contact || "", // 联系人
    mobile: searchData.mobile || "", // 联系电话
    packageId: searchData.packageId || "", // 套餐
    type: searchData.type || "", // 纠纷单类型
    reason: searchData.reason || "", // 纠纷原因
    superName: searchData.superName || "", // 上级渠道
    GSteam: searchData.GSteam || "", // 归属团队
    orderID: searchData.orderID || "", // 订单id
    handle: searchData.release || "", // 回复情况
    isState: searchData.isState || "", // 首回情况
    start: new Date(searchData.time[0]).getTime() || "", // 时间
    end: new Date(searchData.time[1]).getTime() || "", // 时间
    state: ["2", "3"] // 已完成状态
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "投诉已完结列表.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
    loadingXz.value = false
    // console.log(blob, 88888888)
  })
}
</script>

<template>
  <div class="app-container">
    <el-card class="box-card-center" v-loading="loadingXz"
      ><el-tabs v-model="activeName" class="demo-tabs" @tab-click="ChangeClick">
        <!-- 1 -->
        <el-tab-pane label="未处理" name="one">
          <template #label>
            <span class="custom-tabs-label">
              <!-- <el-badge :value="userStore.NOCLsum" class="item"> -->
              <span>未处理</span>
              <!-- </el-badge> -->
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="处理中" name="two">
          <template #label>
            <span class="custom-tabs-label">
              <!-- <el-badge :value="userStore.CLsum" class="item"> -->
              <span>处理中</span>
              <!-- </el-badge> -->
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="已完结" name="stree" />
        <!-- 4 -->
        <el-tab-pane label="驳回工单" name="four">
          <!-- 搜索 -->
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="time" label="订单日期">
              <el-date-picker
                v-model="searchData.time"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="id" label="订单外部ID">
              <el-input v-model.trim="searchData.id" clearable placeholder="请输入" style="width: 240px" />
            </el-form-item>
            <el-form-item prop="GSteam" label="店铺名称">
              <el-select v-model="searchData.GSteam" clearable filterable placeholder="请选择店铺名称">
                <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 渲染 -->
          <div class="table-wrapper">
            <el-table :data="tableData4" ref="tableRef">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column prop="orderId" label="订单外部ID" align="center" />
              <el-table-column label="投诉订单创建时间" align="center">
                <template #default="scope">
                  {{ formatDateTime(scope.row.time) }}
                </template>
              </el-table-column>
              <el-table-column prop="packageName" label="套餐" align="center" />
              <!-- <el-table-column prop="contact" label="联系人" align="center" /> -->
              <el-table-column prop="type" label="纠纷单类型" align="center" />
              <el-table-column label="完成状态" align="center">
                <template #default="scope">
                  <el-text class="mx-1" v-if="scope.row.complaintState == '2'" type="success">完成</el-text>
                  <el-text class="mx-1" v-if="scope.row.complaintState == '3'" type="danger">超时完成</el-text>
                </template>
              </el-table-column>
              <el-table-column prop="dispose" label="处理人" align="center" />
              <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" text bg size="small" @click="addWorkOrder(scope.row)">修改提交</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal3"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <!-- 5 -->
        <el-tab-pane label="免责工单" name="five">
          <!-- 搜索 -->
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="time" label="订单日期">
              <el-date-picker
                v-model="searchData.time"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="freeTime" label="减免通过时间">
              <el-date-picker
                v-model="searchData.freeTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="id" label="订单外部ID">
              <el-input v-model.trim="searchData.id" clearable placeholder="请输入" style="width: 240px" />
            </el-form-item>
            <el-form-item prop="GSteam" label="店铺名称">
              <el-select v-model="searchData.GSteam" clearable filterable placeholder="请选择店铺名称">
                <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>

            <el-tooltip content="下载">
              <el-button style="margin-bottom: 20px" type="primary" :icon="Download" circle @click="handleDownLoad" />
            </el-tooltip>
          </el-form>
          <!-- 渲染 -->
          <div class="table-wrapper">
            <el-table :data="tableData4" ref="tableRef" v-loading="loading">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column prop="orderId" label="订单外部ID" align="center" />
              <el-table-column label="投诉订单创建时间" align="center">
                <template #default="scope">
                  {{ formatDateTime(scope.row.time) }}
                </template>
              </el-table-column>
              <el-table-column label="减免通过时间" align="center">
                <template #default="scope">
                  {{ formatDateTime(scope.row.freeTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="shopName" label="归属团队" align="center" />
              <el-table-column prop="packageName" label="套餐" align="center" />
              <!-- <el-table-column prop="contact" label="联系人" align="center" /> -->
              <el-table-column prop="type" label="纠纷单类型" align="center" />
              <el-table-column label="完成状态" align="center">
                <template #default="scope">
                  <el-text class="mx-1" v-if="scope.row.complaintState == '2'" type="success">完成</el-text>
                  <el-text class="mx-1" v-if="scope.row.complaintState == '3'" type="danger">超时完成</el-text>
                </template>
              </el-table-column>
              <el-table-column prop="dispose" label="处理人" align="center" />
              <el-table-column label="申诉状态" align="center">
                <template #default="scope">
                  <el-text class="mx-1" type="danger">{{ scope.row.shenstate }}</el-text>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" text bg size="small" @click="addWorkOrder(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal3"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <!-- 6 -->
        <el-tab-pane label="不免责工单" name="six">
          <!-- 搜索 -->
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="time" label="订单日期">
              <el-date-picker
                v-model="searchData.time"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="id" label="订单外部ID">
              <el-input v-model.trim="searchData.id" clearable placeholder="请输入" style="width: 240px" />
            </el-form-item>
            <el-form-item prop="GSteam" label="店铺名称">
              <el-select v-model="searchData.GSteam" clearable filterable placeholder="请选择店铺名称">
                <el-option v-for="item in TeamListArr" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
            <el-tooltip content="下载">
              <el-button style="margin-bottom: 20px" type="primary" :icon="Download" circle @click="handleDownLoad" />
            </el-tooltip>
          </el-form>
          <!-- 渲染 -->
          <div class="table-wrapper">
            <el-table :data="tableData4" ref="tableRef" v-loading="loading">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column prop="orderId" label="订单外部ID" align="center" />
              <el-table-column label="投诉订单创建时间" align="center">
                <template #default="scope">
                  {{ formatDateTime(scope.row.time) }}
                </template>
              </el-table-column>
              <el-table-column prop="shopName" label="归属团队" align="center" />
              <el-table-column prop="packageName" label="套餐" align="center" />
              <!-- <el-table-column prop="contact" label="联系人" align="center" /> -->
              <el-table-column prop="type" label="纠纷单类型" align="center" />
              <el-table-column label="完成状态" align="center">
                <template #default="scope">
                  <el-text class="mx-1" v-if="scope.row.complaintState == '2'" type="success">完成</el-text>
                  <el-text class="mx-1" v-if="scope.row.complaintState == '3'" type="danger">超时完成</el-text>
                </template>
              </el-table-column>
              <el-table-column prop="dispose" label="处理人" align="center" />
              <el-table-column label="申诉状态" align="center">
                <template #default="scope">
                  <el-text class="mx-1" type="danger">{{ scope.row.shenstate }}</el-text>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="200">
                <template #default="scope">
                  <el-popconfirm title="您确定要申诉此工单吗?" @confirm="confirmEvent">
                    <template #reference>
                      <el-button type="primary" text bg size="small" @click="shenSubmit(scope.row)">申诉工单</el-button>
                    </template>
                  </el-popconfirm>

                  <el-button type="primary" text bg size="small" @click="addWorkOrder(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal3"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 投诉搜索 -->
      <el-form
        v-if="activeName == 'one' || activeName == 'two' || activeName == 'stree'"
        ref="searchFormRef"
        :inline="true"
        :model="searchData"
      >
        <el-form-item prop="time" label="订单日期">
          <el-date-picker
            v-model="searchData.time"
            type="datetimerange"
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :default-time="defaultTime1"
          />
        </el-form-item>
        <el-form-item prop="contact" label="联系人">
          <el-input v-model.trim="searchData.contact" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="mobile" label="联系电话">
          <el-input v-model.trim="searchData.mobile" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="纠纷单类型" prop="type">
          <el-select v-model="searchData.type" placeholder="请选择投诉单类型">
            <el-option label="工商部投诉" value="工商部投诉" />
            <el-option label="工信部投诉" value="工信部投诉" />
            <el-option label="运营商投诉" value="运营商投诉" />
            <el-option label="平台投诉" value="平台投诉" />
          </el-select>
        </el-form-item>
        <el-form-item prop="packageId" label="套餐">
          <el-select
            v-model="searchData.packageId"
            clearable
            filterable
            placeholder="请输入关键字快速查询"
            style="width: 240px"
            remote
            reserve-keyword
            :remote-method="comboAll"
            :loading="loading"
          >
            <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id + ''" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="packageId" label="套餐">
          <el-select v-model="searchData.packageId" clearable filterable placeholder="请选套餐" style="width: 240px">
            <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <el-form-item prop="reason" label="纠纷原因">
          <el-input v-model.trim="searchData.reason" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="orderID" label="订单ID">
          <el-input v-model.trim="searchData.orderID" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="activeName == 'two'" label="回复情况" prop="reply">
          <el-select v-model="searchData.reply" placeholder="请选择回复情况">
            <el-option label="未回复" value="未回复" />
            <el-option label="已回复" value="已回复" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName == 'stree'" label="首回情况" prop="isState">
          <el-select v-model="searchData.isState" placeholder="请选择首回情况">
            <el-option label="按时首回" value="按时首回" />
            <el-option label="首回超时" value="首回超时" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-tooltip v-if="activeName == 'stree'" content="下载">
          <el-button style="margin-bottom: 15px" type="primary" :icon="Download" circle @click="downLoad" />
        </el-tooltip>
      </el-form>
      <!-- 投诉内容 -->
      <el-table
        v-if="activeName == 'one' || activeName == 'two' || activeName == 'stree'"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="orderID" label="订单ID" />
        <el-table-column prop="orderOutId" label="订单外部ID" />
        <el-table-column prop="time" label="申请日期">
          <template #default="scope">
            {{ formatDateTime(scope.row.time) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="纠纷单类型" />
        <el-table-column prop="reason" label="纠纷原因" />
        <el-table-column prop="team" label="归属团队" />
        <el-table-column prop="packageName" label="系统套餐" />
        <el-table-column prop="user" label="下单账号" />
        <el-table-column prop="contact" label="联系人" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column v-if="activeName == 'two'" label="回复情况" align="center">
          <template #default="scope">
            <el-text class="mx-1" type="success" v-if="scope.row.release == '发布已回复'">已回复</el-text>
            <el-text class="mx-1" type="danger" v-else>未回复</el-text>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == 'two' || activeName == 'stree'" label="首回情况" align="center">
          <template #default="scope">
            <el-text class="mx-1" type="success" v-if="scope.row.isState == '按时首回'">{{
              scope.row.isState
            }}</el-text>
            <el-text class="mx-1" type="danger" v-else>{{ scope.row.isState }}</el-text>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName !== 'stree'" label="催单提醒">
          <template #default="scope">
            <el-text class="mx-1" type="danger">{{ scope.row.isRush }}</el-text>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == 'two'" label="进度" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleClick(scope.row)">查看进度</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == 'one'" label="开始处理" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleAdd(scope.row)">接收</el-button>
          </template>
        </el-table-column>
        <!--  -->
        <el-table-column v-if="activeName == 'stree'" label="详情" align="center" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleClick(scope.row)">查看进度详情</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == 'stree'" label="完成状态" align="center">
          <template #default="scope">
            <div v-if="scope.row.state == '2'">完成</div>
            <div v-else class="active">超时完成</div>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == 'stree'" label="工单记录" align="center" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleWorkOrder(scope.row)">查看工单进度</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == 'stree'" label="生成工单" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="addWorkOrder(scope.row)"
              v-if="scope.row.isTwo == 'false' && userStore.teamName !== ''"
            >
              未生成
            </el-button>
            <el-button type="danger" size="small" disabled v-if="scope.row.isTwo !== 'false'">已生成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 投诉页码 -->
      <div v-if="activeName == 'one' || activeName == 'two' || activeName == 'stree'" class="pagination">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="paginationData.total"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 查看详情 -->
    <el-dialog v-model="dialogVisible" width="70%" @closed="resetForm">
      <div class="box">
        <div class="boxOne">
          <div class="boxtitle">纠纷单信息标题</div>
          <el-scrollbar height="360px">
            <div class="boxOneTest">
              <el-form :model="ruleFormXQ" label-position="left">
                <el-form-item label="发布管理员：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.issuer }}</el-text>
                </el-form-item>
                <!-- <el-form-item label="上级信息：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.superName }}</el-text>
                </el-form-item> -->
                <el-form-item label="归属团队：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.team }}</el-text>
                </el-form-item>
                <!-- 系统套餐 -->
                <el-form-item label="系统套餐：" style="margin-bottom: -10px">
                  {{ ruleFormXQ.data.packageName }}
                </el-form-item>
                <el-form-item label="纠纷单号：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.KID }}</el-text>
                </el-form-item>
                <el-form-item label="申请日期：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Ktime }}</el-text>
                </el-form-item>
                <el-form-item label="纠纷单类型：" style="margin-bottom: -10px">
                  <el-text class="mx-1" type="warning">{{ ruleFormXQ.data.Ktype }}</el-text>
                </el-form-item>
                <el-form-item label="纠纷原因：" style="margin-bottom: -10px">
                  <el-text class="mx-1" type="warning">{{ ruleFormXQ.data.Kreason }}</el-text>
                </el-form-item>
                <el-form-item label="纠纷理由：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kcause }}</el-text>
                </el-form-item>
                <el-form-item label="订单外部ID：" style="margin-bottom: -10px">
                  <el-text class="mx-1" type="primary">{{ ruleFormXQ.data.KorderOutId }}</el-text>
                </el-form-item>
                <el-form-item label="下单账号：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kuser }}</el-text>
                </el-form-item>
                <el-form-item label="联系人：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kcontact }}</el-text>
                </el-form-item>
                <el-form-item label="联系电话：" style="margin-bottom: -10px">
                  <el-text class="mx-1">{{ ruleFormXQ.data.Kmobile }}</el-text>
                </el-form-item>
                <el-form-item prop="image" label="纠纷单图片" v-if="ruleFormXQ.data.Kimage !== '111'">
                  <!-- {{ ruleFormXQ.data.Kimage }} -->
                  <el-image
                    class="JFimage"
                    v-for="(item, index) in ruleFormXQ.data.Kimage"
                    :preview-src-list="[item]"
                    :key="index"
                    :src="item"
                    :zoom-rate="1.2"
                    fit="cover"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-scrollbar>
        </div>

        <div class="boxTow">
          <el-scrollbar height="400px">
            <div
              :class="message.user == userStore.username ? 'chat-message-me' : 'chat-message-other'"
              :style="{ 'padding-bottom': messages.length - 1 === index ? '2rem' : 'none' }"
              v-for="(message, index) in messages"
              :key="index"
            >
              <!--          消息-->
              <div
                :class="message.user == userStore.username ? 'message-me-asWhole-right' : 'message-other-asWhole-right'"
              >
                <!--            消息上面-->
                <div
                  :class="message.user == userStore.username ? 'message-me-asWhole-top' : 'message-other-asWhole-top'"
                >
                  <span style="margin-right: 10px">{{ formatDateTime(message.time) }}</span>
                  <span>{{ message.user }}</span>
                </div>
                <!--          消息内容-->
                <div :class="message.user == userStore.username ? 'message-me' : 'message-other'">
                  <div>{{ message.body }}</div>
                  <template v-if="message.image.split('/image/')[1] && message.image.split('/image/')[1] !== ','">
                    <el-image
                      v-for="(item, index) in message.image.slice(0, -1).split(',')"
                      :preview-src-list="message.imageList"
                      :key="index"
                      style="width: 100px; height: 100px"
                      :src="item"
                      :zoom-rate="1.2"
                      fit="cover"
                    />
                  </template>
                  <video v-if="message.video !== null" controls width="250">
                    <source :src="message.video" type="video/mp4" />
                  </video>
                  <audio v-if="message.audio !== null" :src="message.audio" controls loop muted>
                    浏览器不支持音频播放。
                  </audio>
                  <div style="display: flex; align-items: center">
                    <el-button v-if="message.amr !== null" @click="playAmrData(message.amr)">播放amr录音数据</el-button>
                    <div v-if="amrtime !== 0" style="margin-left: 10px">录音时长{{ amrtime }}秒</div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="boxDivForm" v-if="Kstate == '1'">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
        >
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            drag
            :limit="1"
            action="api/complaint/uploadVideo"
            multiple
            :disabled="isUploading"
            :on-progress="UploadProgress"
            :on-success="UploadSuccess"
            :on-error="UploadError"
            :headers="headersOpts"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">仅允许导入音频、视频</div>
            </template>
          </el-upload>
          <el-form-item label="反馈信息框" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <!-- 反馈图片 -->
          <el-form-item prop="image" label="反馈图片">
            <el-upload
              :multiple="true"
              :auto-upload="false"
              :file-list="fileList"
              :show-file-list="true"
              list-type="picture-card"
              accept="image/*"
              :on-change="handleChageImg"
              :on-preview="handlePictureCardPreview"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible2">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 生成工单 -->
    <el-dialog v-model="dialogVisibleA" width="50%" @closed="resetFormA">
      <el-button v-if="PDbutton !== 1 && PDbutton !== 3" type="success" class="primary-btn" @click="handleExport"
        >导出PDF</el-button
      >

      <!-- 此处是希望转成pdf的部分的内容，用一个大div盒子包起来 -->
      <!-- <el-scrollbar height="600px">  因为要打印所以取消 下拉-->
      <el-form
        ref="ruleFormRef"
        :model="PDbutton == 0 || PDbutton == 1 ? formWorkOrder : formWorkOrder.data"
        label-width="120px"
      >
        <div class="check-wrapper" id="pdfRef">
          <!-- 四个框 -->
          <table border="1" cellspacing="0" width="100%" height="100">
            <tr class="tableTr">
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  <el-text class="mx-1">{{ "店铺名称：" }}</el-text>
                  <el-text class="mx-1">{{ formWorkOrder.data.shopName }}</el-text>
                </el-form-item>
              </th>
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  <el-text class="mx-1">{{ "订单外部ID：" }}</el-text>
                  <el-text class="mx-1">{{ formWorkOrder.data.orderId }}</el-text>
                </el-form-item>
              </th>
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  {{ "套餐名称：" }}
                  <el-text> {{ formWorkOrder.data.packageName }}</el-text>
                </el-form-item>
              </th>
              <th style="width: 230px">
                <el-form-item label-width="0px">
                  <el-text class="mx-1">{{ "投诉时间：" }}</el-text>
                  <el-text class="mx-1">{{ formatDateTime(formWorkOrder.data.time) }}</el-text>
                </el-form-item>
              </th>
            </tr>
          </table>
          <!-- 三个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <!-- 违规----- -->
            <tr class="tableTr" height="50">
              <td>是否违规承诺</td>
              <td>是否虚假宣传</td>
              <td>详情图是否有歧义</td>
            </tr>
            <tr class="tableTr">
              <td>
                <div class="centerSelect">
                  <el-form-item
                    prop="kpromise"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.kpromise"
                  >
                    <el-select v-model="formWorkOrder.data.kpromise" :disabled="PDbutton == 0">
                      <el-option label="是" value="是" />
                      <el-option label="否" value="否" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item
                    prop="publicity"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.publicity"
                  >
                    <el-select v-model="formWorkOrder.data.publicity" :disabled="PDbutton == 0">
                      <el-option label="是" value="是" />
                      <el-option label="否" value="否" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item
                    prop="ambiguity"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.ambiguity"
                  >
                    <el-select v-model="formWorkOrder.data.ambiguity" :disabled="PDbutton == 0">
                      <el-option label="是" value="是" />
                      <el-option label="否" value="否" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
            </tr>
            <!-- 售前---- -->
            <tr class="tableTr" height="50">
              <td>售前接待记录</td>
              <td>售后接待记录</td>
              <td>客户是否满意</td>
            </tr>
            <tr class="tableTr">
              <td>
                <div class="centerSelect">
                  <el-form-item
                    prop="preSales"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.preSales"
                  >
                    <el-select v-model="formWorkOrder.data.preSales" :disabled="PDbutton == 0">
                      <el-option label="有" value="有" />
                      <el-option label="无" value="无" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item
                    prop="afterSale"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.afterSale"
                  >
                    <el-select v-model="formWorkOrder.data.afterSale" :disabled="PDbutton == 0">
                      <el-option label="有" value="有" />
                      <el-option label="无" value="无" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
              <td>
                <div class="centerSelect">
                  <el-form-item
                    prop="satisfaction"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.satisfaction"
                  >
                    <el-select v-model="formWorkOrder.data.satisfaction" :disabled="PDbutton == 0">
                      <el-option label="满意" value="满意" />
                      <el-option label="不满意" value="不满意" />
                    </el-select>
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 一个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%">
            <tr>
              <td>
                <div>
                  <el-form-item label-width="0px">
                    <el-text class="mx-1">{{ "投诉内容：" }}</el-text>
                    <el-text class="mx-1">{{ formWorkOrder.data.cause }}</el-text>
                  </el-form-item>
                  <!-- <span>投诉内容</span>
                  <el-form-item prop="cause" label-width="0px">
                    <el-input
                      v-model="formWorkOrder.data.cause"
                      disabled
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item> -->
                </div>
              </td>
            </tr>
          </table>
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <span>投诉原因</span>
                  <el-form-item prop="reason" label-width="0px">
                    <el-input
                      v-model="formWorkOrder.data.reason"
                      disabled
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <span>处理结果</span>
                  <el-form-item
                    prop="result"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.result"
                  >
                    <el-input
                      :disabled="PDbutton == 0"
                      v-model="formWorkOrder.data.result"
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 二个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <span>自我检查</span>
                  <el-form-item
                    prop="examine"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.examine"
                  >
                    <el-input
                      :disabled="PDbutton == 0"
                      v-model="formWorkOrder.data.examine"
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <span>后期规避</span>
                  <el-form-item
                    prop="evade"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.evade"
                  >
                    <el-input
                      :disabled="PDbutton == 0"
                      v-model="formWorkOrder.data.evade"
                      type="textarea"
                      resize="none"
                      style="white-space: pre-line"
                    />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 三个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <el-text class="mx-1">{{ "责任人：" }}</el-text>
                  <el-form-item
                    prop="duty"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.duty"
                  >
                    <el-input v-model="formWorkOrder.data.duty" :disabled="PDbutton == 0" />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "接待人：" }}</el-text>
                  <el-form-item
                    prop="reception"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.reception"
                  >
                    <el-input v-model="formWorkOrder.data.reception" :disabled="PDbutton == 0" />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "处理人：" }}</el-text>
                  <el-form-item
                    prop="dispose"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.dispose"
                  >
                    <el-input v-model="formWorkOrder.data.dispose" :disabled="PDbutton == 0" />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 二个框 -->
          <table border="1" class="tableTb" cellspacing="0" width="100%" height="100">
            <tr>
              <td>
                <div>
                  <el-text class="mx-1">{{ "店长：" }}</el-text>
                  <el-form-item
                    prop="shopManager"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.shopManager"
                  >
                    <el-input v-model="formWorkOrder.data.shopManager" disabled />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "运营：" }}</el-text>
                  <el-form-item
                    prop="operation"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.operation"
                  >
                    <el-input v-model="formWorkOrder.data.operation" disabled />
                  </el-form-item>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div>
                  <el-text class="mx-1">{{ "部门经理：" }}</el-text>
                  <el-form-item
                    prop="manager"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.manager"
                  >
                    <el-input v-model="formWorkOrder.data.manager" disabled />
                  </el-form-item>
                </div>
              </td>
              <td>
                <div>
                  <el-text class="mx-1">{{ "公司售后：" }}</el-text>
                  <el-form-item
                    prop="company"
                    label-width="0px"
                    :rules="PDbutton == 0 || PDbutton == 1 ? '' : FormRulesYZ.company"
                  >
                    <el-input v-model="formWorkOrder.data.company" disabled />
                  </el-form-item>
                </div>
              </td>
            </tr>
          </table>
          <!-- 多张图片上传 -->
          <el-form-item prop="image" label="反馈图片" v-if="PDbutton !== 0" style="margin-top: 20px">
            <el-upload
              :multiple="true"
              v-model:file-list="fileList1"
              action="api/order/package/upload"
              list-type="picture-card"
              :on-remove="handleRemove"
              :headers="headersOpts"
              accept="image/*"
              :on-change="handleChageImg1"
              :on-preview="handlePictureCardPreviewA"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisibleB">
              <img w-full :src="dialogImageUrlB" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item
            prop="image"
            label="反馈图片"
            style="margin-top: 20px"
            v-if="formWorkOrder.data.kimage !== '' && PDbutton == 0"
          >
            <el-image
              v-for="(item, index) in formWorkOrder.data.kimage"
              style="width: 100px; height: 100px"
              :preview-src-list="[item]"
              :key="index"
              :src="item"
              :zoom-rate="1.2"
              fit="cover"
            />
          </el-form-item>
          <el-form-item label="店长意见" v-if="PDbutton == 0 || PDbutton == 1" prop="shopManagerTest">
            <el-input
              :disabled="PDbutton == 0"
              v-model="formWorkOrder.data.shopManagerTest"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
          <el-form-item label="运营意见" v-if="PDbutton == 0 || PDbutton == 1" prop="operationTest">
            <el-input
              :disabled="PDbutton == 0"
              v-model="formWorkOrder.data.operationTest"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
          <el-form-item label="部门意见" v-if="PDbutton == 0 || PDbutton == 1" prop="managerTest">
            <el-input
              :disabled="PDbutton == 0"
              v-model="formWorkOrder.data.managerTest"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
          <el-form-item label="公司意见" v-if="PDbutton == 0 || PDbutton == 1" prop="companyTest">
            <el-input
              :disabled="PDbutton == 0"
              v-model="formWorkOrder.data.companyTest"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
          <el-form-item label="驳回原因" prop="spReason" v-if="PDbutton == 0 || PDbutton == 1">
            <el-input
              :disabled="PDbutton == 0"
              v-model="formWorkOrder.data.spReason"
              type="textarea"
              resize="none"
              style="white-space: pre-line"
            />
          </el-form-item>
        </div>
      </el-form>
      <!-- </el-scrollbar> -->

      <el-form-item class="anniuyanghsi">
        <el-button v-if="PDbutton == 3" type="primary" @click="onSubmit(ruleFormRef)">确定</el-button>
        <el-button v-if="PDbutton == 1" type="primary" @click="XGSubmit(ruleFormRef)">修改</el-button>
        <el-button @click="dialogVisibleA = false">取消</el-button>
      </el-form-item>
    </el-dialog>
    <el-dialog v-model="dialogVisibleC" width="30%">
      <span>提交完成</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisiblebutton"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleWork" @close="resetForm">
      <el-scrollbar height="600px">
        <el-table :data="tableWork">
          <el-table-column type="index" label="序号" width="120" align="center">
            <template #default="{ $index }">
              {{ (paginationData.currentPage - 1) * paginationData.pageSize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间" align="center">
            <template #default="scope">
              <text v-if="scope.row.time !== null"> {{ formatDateTime(scope.row.time) }}</text>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="状态" align="center" />
        </el-table>
      </el-scrollbar>
    </el-dialog>
    <!-- 申诉原因 -->
    <el-dialog v-model="dialogVisibleshenReason" @close="resetForm" width="30%" label-width="120px">
      <el-form ref="ruleFormRef" :model="formWorkOrder.data" :rules="rules" :inline="true">
        <el-form-item label="申诉原因">
          <el-input v-model="formWorkOrder.data.shenReason" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="shenReasonadd(ruleFormRef)"> 确定 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.box-card-top {
  margin-bottom: 20px;
}
.box {
  display: flex;
  height: 400px;
  justify-content: space-between;
}
.boxOne {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  line-height: 25px;
}
// 对话框样式
.boxTow {
  margin-left: 20px;
  height: 400px;
  flex: 1;
  border: 1px solid #ccc;
}
.chat-message-other {
  /*background-color: red;*/
  display: flex;
  padding: 1rem 1rem 0 1rem;
}

.chat-message-me {
  /*background-color: red;*/
  display: flex;
  padding: 1rem 1rem 0 1rem;
  flex-direction: row-reverse; /* 将子div的顺序反转 */
}

.message-me-asWhole-headPortrait {
  padding: 3px;
}

.message-other-asWhole-headPortrait {
  padding: 3px;
}

.message-me-asWhole-right {
  display: flex;
  flex-direction: column; /* 设置子元素垂直排列 */
  margin-left: 0.1rem;
}

.message-other-asWhole-right {
  display: flex;
  flex-direction: column; /* 设置子元素垂直排列 */
  margin-left: 0.1rem;
}

.message-me-asWhole-top {
  padding: 3px;
  /* font-size: 12px; */
  font-family: 微软雅黑;
  padding: 3px;
  color: rgba(134, 144, 156, 1);
  text-align: right;
}

.message-other-asWhole-top {
  padding: 3px;
  /* font-size: 12px; */
  font-family: 微软雅黑;
  padding: 3px;
  color: rgba(134, 144, 156, 1);
}

.message-me {
  background-color: rgba(242, 243, 245, 1);
  word-wrap: break-word; /* 处理英文单词换行 */
  word-break: break-all; /* 处理中文换行 */
  display: inline-block; /*将div元素转换为行内块元素*/
  width: auto; /* 宽度根据文本宽度自动调正*/
  padding: 6px 12px;
  border-radius: 4px;
}

.message-other {
  background-color: rgba(242, 243, 245, 1);
  word-wrap: break-word; /* 处理英文单词换行 */
  word-break: break-all; /* 处理中文换行 */
  display: inline-block; /*将div元素转换为行内块元素*/
  width: auto; /* 宽度根据文本宽度自动调正*/
  padding: 6px 12px;
  border-radius: 4px;
}

.examineeFace_logo_style {
  width: 30px;
}

.boxOneTest {
  padding: 0 20px 0 20px;
  .JFimage {
    margin: 10px 10px 0 0;
    height: 100px;
    width: 100px;
  }
}
.boxtitle {
  background-color: #ccc;
  height: 30px;
  padding-left: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #000;
}
.boxDivForm {
  margin-top: 20px;
}
.active {
  color: red;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
// 小红点
::v-deep(.el-badge__content.is-fixed) {
  top: -4px;
  right: 6px;
}
.tableTb {
  border-top: 0;
}

.tableTr {
  text-align: center;
}
.centerSelect {
  display: flex;
  align-items: center;
  justify-content: center;
}
.anniuyanghsi {
  margin-top: 10px;
  margin-left: 45%;
}
.pager-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

::v-deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: #020202 !important;
  border: 1px solid #fff;
  background-color: #fff;
}

::v-deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #000;
  background-color: #ffffff;
}
</style>
